import {useEffect, useState} from "react";
import axios from "axios";
import {baseUrl} from "../../../settings/Settings.ts";
import {LineBook} from "../../../model/LineBook.ts";
import ProfileBookCard from "../ProfileBookCard.tsx";


const BookHolder = () => {

    const [bookList, setBookList] = useState<LineBook>([])


    useEffect(() => {

        const fetchData = async () => {
            try {
                const response = await axios.get(`${baseUrl}/api/account/info`, {
                    withCredentials: true, // send credentials with the request
                    headers: {
                        'Content-Type': 'application/json'
                    }
                });

                const data = response.data;
                if (response.status === 200) {
                    const account = data.account
                    setBookList(account.listBooks);
                    console.log(bookList)
                }


            } catch (error) {
                console.error('Error fetching data');
            }
        };

        fetchData();

    }, []);


    return (
        <>
            <div className="row row-cols-1 mt-0 row-cols-sm-2 row-cols-md-4 g-3 card-row m-1">
                {
                    bookList.map((book) => (
                            <ProfileBookCard lineBook={book}/>

                    ))
                }

            </div>
        </>

    )
}

export default BookHolder